<template>
  <AcceptHandleHeadComponent
    ref="acceptHandleHeadRef"
    :ucolumns="columns"
    :type="LableTitle.correctGeopointCustome"
    :needMoreQuery="true"
    :showCaseNoQuery="false"
    @myEvent="myEvent"
    @onSearch="search"
    @onReset="reset"
  >
    <div slot="headLeft">
      <a-form-item style="display: flex; margin-bottom: 0px">
        <a-input v-model="searchParams.f_name" placeholder="请输入位置描述" allowClear style="height: 40px" />
      </a-form-item>
    </div>

    <div slot="headRight" style="margin-right: 30px">
      <a-button class="btn_primary_color" type="primary" style="margin-left: 12px" @click="addRule">新增范围</a-button>
    </div>

    <!-- 其他查询条件 -->
    <div slot="more">
      <a-form layout="inline" class="accept_more_operate_moreForm">
        <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse" >
          <a-collapse-panel  :show-arrow="false" disabled key="1" style="font-weight: bold">
            <div slot="header" class="accept_more_operate_moreForm_collapse_head">
              <a-row :gutter="48" style="width: 100%">
                <a-col @click.stop="() => {}" :md="24" :sm="24">
                  <a-form-item label="创建时间">
                    <a-range-picker
                      v-model="createTimes"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      @change="createTimeChange"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </a-form>
    </div>

    <template slot="content">
      <a-table
        :scroll="scroll"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        rowKey="id"
        @change="tableChange"
        size="middle"
        :bordered="true"
        :rowClassName="rowClassName"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
        </span>

        <div slot="nameSlot" slot-scope="name" style="text-align: left">
          {{ name }}
          {{ name }}
        </div>

        <div slot="operation" slot-scope="text, record">
          <a href="#" @click="editRule(record.id)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="是否删除这条规则？" ok-text="确认" cancel-text="取消" @confirm="deleteRule(record.id)">
            <a href="#" style="color: red">删除</a>
          </a-popconfirm>
        </div>
      </a-table>
    </template>
  </AcceptHandleHeadComponent>
</template>
<script>
import { deleteGeopoint, geopointList } from '@/api/correction/crc_geopoint'
import { LableTitle } from '@/enumeration/LableTitle.js'
import AcceptHandleHeadComponent from '@/views/accept/component/AcceptHandleHeadComponent.vue'
const columns = [
  {
    title: '序号',
    width: 80,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '位置描述',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    width: 650,
    ellipsis: true,
    scopedSlots: { customRender: 'nameSlot' }
  },
  {
    title: '区域类型',
    dataIndex: 'areatype_text',
    key: 'areatype_text',
    align: 'center',
    width: 350,
    ellipsis: true
  },
  {
    title: '创建时间',
    dataIndex: 'createtime',
    key: 'createtime',
    align: 'center',
    width: 300
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 250,
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  components: {
    HEADERDEFINITION: () => import('@/views/customComponents/headerDefinition.vue'),
    AcceptHandleHeadComponent
  },
  computed: {},
  data () {
    return {
      loading: false,
      columns: columns,
      dataSource: [],
      createTimes: [],
      searchParams: {
        f_name: '',
        f_createtime: undefined,
        f_createtime_01: undefined
      },
      queryParams: {
        f_name: '',
        f_createtime: undefined,
        f_createtime_01: undefined,
        // 默认查询自定义数据
        f_defaultarea: 3201,
        pageNumber: 1,
        pageSize: 20,
        sort: 'createtime',
        order: 'desc'
      },
      pagination: {
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: total => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      LableTitle: LableTitle,
      header: undefined,
      tableCountKey: 0,
      collapseKey: [], // 折叠面板key
      scroll: { x: 1000, y: 420 }
    }
  },
  methods: {
    myEvent (e) {
      if (e) {
        this.scroll.y = this.scroll.y + e
      } else {
        this.scroll.y = 410
      }
    },
    rowClassName (record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    },
    search () {
      console.log(this.$router)
      this.queryParams.pageNumber = 1
      this.queryParams.f_name = this.searchParams.f_name
      this.queryParams.f_createtime = this.searchParams.f_createtime
      this.queryParams.f_createtime_01 = this.searchParams.f_createtime_01
      this.loadData(this.queryParams)
    },
    reset () {
      this.searchParams = this.$options.data().searchParams
      this.queryParams = this.$options.data().queryParams
      this.pagination = this.$options.data().pagination
      this.createTimes = []
      this.search()
    },
    createTimeChange (dates) {
      console.log(dates)
      if (dates.length > 0) {
        this.searchParams.f_createtime = dates[0]
        this.searchParams.f_createtime_01 = dates[1]
      } else {
        this.searchParams.f_createtime = undefined
        this.searchParams.f_createtime_01 = undefined
      }
    },
    tableChange (pagination) {
      this.queryParams.pageNumber = pagination.current
      this.queryParams.pageSize = pagination.pageSize
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.loadData(this.queryParams)
    },
    async loadData (params) {
      this.loading = true
      const { code, data } = await geopointList(params)
      if (code !== 0) {
        this.loading = false
        this.$message.error('查询数据失败!')
        return
      }
      this.dataSource = data.records
      this.pagination.total = data.total
      this.pagination.current = data.current
      this.pagination.pageSize = data.size
      this.loading = false
    },
    addRule () {
      this.$router.push({
        path: '/CorrectGeopointDetail',
        query: {
          params: JSON.stringify(this.queryParams),
          type: 'geopoint'
        }
      })
    },
    editRule (ruleId) {
      this.$router.push({
        path: '/CorrectGeopointDetail',
        query: {
          params: JSON.stringify(this.queryParams),
          type: 'geopoint',
          ruleId: ruleId
        }
      })
    },
    async deleteRule (ruleId) {
      const { code } = await deleteGeopoint(ruleId)
      if (code !== 0) {
        this.$message.error('删除范围坐标失败')
        return
      }
      this.search()
    }
  },
  created () {
    if (this.$route.query.params) {
      this.queryParams = JSON.parse(this.$route.query?.params)
      this.pagination.current = this.queryParams.pageNumber
      this.pagination.pageSize = this.queryParams.pageSize
      this.searchParams.f_name = this.queryParams.f_name
      this.searchParams.f_createtime = this.queryParams.f_createtime
      this.searchParams.f_createtime_01 = this.queryParams.f_createtime_01
      this.createTimes = [this.searchParams.f_createtime, this.searchParams.f_createtime_01]
    }
    this.loadData(this.queryParams)
  }
}
</script>
<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';

.formArea {
  margin-bottom: 30px;
}
.headerdefBox img {
  height: 20px;
  width: 20px;
}
.headerdefBox {
  margin: 0 10px 10px 0;
  display: flex;
  justify-content: end;
}
</style>
